<template>
  <section class="bg-gray-fa lg:pt-20 lg:pb-14 py-9 text-center">
    <div class="lg:text-3xl text-xl font-bold">平台演示</div>

    <div class="lg:mt-9 mt-4 container mx-auto">
      <div class="flex justify-around lg:text-xl text-base font-bold">
        <div
          :class="tab === 1 ? 'text-red' : 'text-gray'"
          class="cursor-pointer"
          @click="tab = 1"
        >
          安全双预防
        </div>
        <div
          :class="tab === 2 ? 'text-red' : 'text-gray'"
          class="cursor-pointer"
          @click="tab = 2"
        >
          智能监控
        </div>
      </div>
      <div class="mt-9 lg:flex hidden justify-between space-x-8">
        <div class="p-[10px] rounded shadow" v-for="item in list" :key="item">
          <img :src="item" class="w-full" />
        </div>
      </div>
    </div>
    <div class="px-8 lg:hidden block">
      <van-swipe class="mt-5" :autoplay="5000" indicator-color="white">
        <van-swipe-item class="" v-for="item in list" :key="item">
          <img
            :src="item"
            class="p-2 rounded border border-gray-300 border-solid w-full"
            alt=""
          />
        </van-swipe-item>
        <!-- <van-swipe-item class="">
          <img
            src="@/assets/img/yf2.jpg"
            class="p-2 rounded border border-gray-300 border-solid w-full"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="">
          <img
            src="@/assets/img/yf3.jpg"
            class="p-2 rounded border border-gray-300 border-solid w-full"
            alt=""
          />
        </van-swipe-item> -->
      </van-swipe>
    </div>

    <info-btn class="mt-12 lg:flex hidden" @click.native="$store.commit('SQ')"
      >免费试用平台</info-btn
    >
  </section>
</template>

<script>
export default {
  data() {
    return {
      tab: 1,
      list1: [
        require("@/assets/img/yf.jpg"),
        require("@/assets/img/yf2.jpg"),
        require("@/assets/img/yf3.jpg"),
      ],
      list2: [
        require("@/assets/img/jk.jpg"),
        require("@/assets/img/jk2.jpg"),
        require("@/assets/img/jk3.jpg"),
      ],
    };
  },
  computed: {
    list() {
      return this.tab === 1 ? this.list1 : this.list2;
    },
  },
};
</script>
